<template>
  <div class="home">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <vheader class="blackOrWhite" />
      <div style="height:.5rem"></div>
      <van-swipe class="my-swipe" :autoplay="300000" indicator-color="white">
        <van-swipe-item v-for="item in hBanner" :key="item.id" @click="goDetail(item.id)">
          <img class="bannerImg" :src="item.image" alt="图片加载失败" />
          <div class="bannerDetail">
            <p>{{item.title}}</p>
            <p>{{item.hint}}</p>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="listBox blackOrWhite">
        <ul>
          <li v-for="obj in hList" :key="obj.id" @click="goDetail(obj.id)">
            <div class="lileft">
              <p>{{obj.title}}</p>
              <p>{{obj.hint}}</p>
            </div>
            <img :src="obj.images[0]" alt />
          </li>
        </ul>
      </div>
      <van-list
        class="listBox"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="blackOrWhite" v-for="item in hListTwo" :key="item.date">
          <li class="liTate" :key="item.date">
            <span>{{item.date|timeTranslate}}</span>
            <p></p>
          </li>
          <li @click="goDetail(obj.id)" v-for="obj in item.stories" :key="obj.id">
            <div class="lileft">
              <p>{{obj.title}}</p>
              <p>{{obj.hint}}</p>
            </div>
            <img :src="obj.images? obj.images[0] : ''" alt />
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style lang="scss">
.van-swipe__indicators {
  left: auto;
  right: 0;
}
.van-swipe__indicator--active {
  width: 0.2rem;
  border-radius: 0.05rem;
}
</style>
<style lang="scss" scoped>
.van-swipe-item {
  margin-bottom: -0.03rem;
}
.bannerImg {
  width: 100%;
}
.bannerDetail {
  position: absolute;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  left: 0;
  right: 0;
  bottom: 0.03rem;
  p {
    color: #fff;
    padding: 0.1rem;
    font-weight: 700;
    font-size: 0.18rem;
  }
  p:nth-child(2) {
    color: #fff;
    padding: 0.1rem;
    font-size: 0.14rem;
    font-weight: 100;
  }
}
.listBox {
  img {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.05rem;
    margin-right: 0.1rem;
  }
  ul {
    li {
      display: flex;
      padding: 0.1rem 0;
      border-bottom: 0.01rem solid #eee;
      .lileft {
        flex: 1;
        p {
          margin-left: 0.2rem;
          font-weight: 700;
          margin-top: 0.05rem;
          font-size: 0.18rem;
        }
        p:nth-child(2) {
          font-weight: 100;
          font-size: 0.14rem;
        }
      }
    }
    li:nth-last-child(1) {
      border: none;
    }
  }
  .liTate {
    display: flex;
    align-items: center;
    color: #aaa;
    font-size: 0.14rem;
    border: none;
    span {
      margin: 0 0.1rem;
    }
    p {
      flex: 1;
      height: 1px;
      display: inline-block;
      background: #ccc;
    }
  }
}
</style>
<script>
import {mapState, mapActions} from 'vuex';
import { Toast } from "vant";
import v_header from "@/components/header.vue";
import { HomeBanner, HomeList } from "@/util/homeAjax.js";
export default {
  name: "Home",
  components: {
    vheader: v_header
  },
  data: function() {
    return {
      hBanner: [], //banner数据
      hList: [], //获取banner的时候获取的列表数据
      hListTwo: [], //获取列表数据
      loading: false,
      finished: false,
      timeNum: 0, //获取多少天之前的
      getFlag: true, //是否获取数据
      isLoading: false,
    };
  },
  created() {
    this.getBanner();
  },
  activated () {
    this.$nextTick(() => {
      // console.log('回到之前的高度');
      document.documentElement.scrollTop = this.distance;
    })
  },
  filters: {
    timeTranslate(val) {
      return val.substring(4, 6) + "月" + val.substring(6, 8) + "日";
    }
  },
  computed: {
    ...mapState('home',['distance'] )
  },
  methods: {
    ...mapActions('home',['set_change_distance']),
    getBanner() {
      HomeBanner().then(obj => {
        // console.log(obj);
        this.hBanner = obj.top_stories;
        this.hList = obj.stories;
      });
    },
    getHomeList() {
      //获取初始列表数据
      var timestamp = new Date().getTime(); //时间戳
      timestamp -= 86400000 * this.timeNum;
      var time = new Date(timestamp); //转换格式
      HomeList(this.timetransformation(time)).then(obj => {
        this.hListTwo.push(obj);
        this.loading = false;
        this.timeNum++;
        this.getFlag = true;
      });
    },
    timetransformation(now) {
      //获取日期改成需要的格式
      var year = now.getFullYear(); //取得4位数的年份
      var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      if (month < 10) {
        month = "0" + month;
      }
      var date = now.getDate(); //返回日期月份中的天数（1到31）
      if (date < 10) {
        date = "0" + date;
      }
      // console.log("" + year + month + date);
      return "" + year + month + date;
    },
    onLoad() {
      //上拉加载
      if (this.getFlag) {
        this.getFlag = false;
        this.getHomeList();
      }
    },
    onRefresh() {
      //下拉刷新
      var that = this;
      var timestamp = new Date().getTime(); //时间戳
      var time = new Date(timestamp); //转换格式
      Promise.all([HomeBanner(), HomeList(that.timetransformation(time))]).then(
        res => {
          console.log(res);
          //=================
          that.hBanner = res[0].top_stories;
          that.hList = res[0].stories;
          //=================
          that.hListTwo = [];
          that.timeNum = 0;
          that.hListTwo.push(res[1]);
          that.timeNum++;
          //================
          Toast("刷新成功");
          that.isLoading = false;
        }
      );
    },
    goDetail(num) {
      this.$router.push("/detail/" + num);
      this.set_change_distance(document.documentElement.scrollTop)
    }
  }
};
</script>

